<template>
  <div class="examples-root">
    <header>
      <el-button
        v-for="(item, index) in list"
        :key="index"
        type="primary"
        :plain="active !== index"
        @click.native="active = index"
      >
        {{ item.label }}
      </el-button>
    </header>

    <main>
      <component :is="list[active].component" />
    </main>
  </div>
</template>

<script>
import FormByRender from './form-by-render'
import FormNormal from './normal'
import FormCard from './card'
import FormTable from './table'
import FormTabs from './tabs'

export default {
  name: 'Examples',
  data() {
    return {
      active: 0,
      list: [
        {
          label: '常规',
          component: FormNormal
        },
        {
          label: 'schema render or jsx',
          component: FormByRender
        },
        {
          label: '数组卡片',
          component: FormCard
        },
        {
          label: '数组表格',
          component: FormTable
        },
        {
          label: '数组选项卡',
          component: FormTabs
        }
      ]
    }
  }
}
</script>

<style scoped>
    header {
        padding: 24px;
    }
    header .el-button {
      margin-bottom: 12px;
    }
    main {
        padding: 0 24px 24px;
    }
</style>
